<template>
    <div class="system-user-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="userFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户名称" prop="username">
                            <el-input v-model="state.ruleForm.username" placeholder="请输入账户名称"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户姓名" prop="realName">
                            <el-input v-model="state.ruleForm.realName" placeholder="请输入用户姓名"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户昵称" prop="nickname">
                            <el-input v-model="state.ruleForm.nickname" placeholder="请输入用户昵称"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户角色" prop="roleIds">
                            <el-select v-model="state.ruleForm.roleIds" placeholder="请选择" clearable class="w100">
                                <el-option :label="item.label" :value="item.id" :key="item.id"
                                           v-for="item in state.roleData"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户机构" prop="deptIds">
                            <el-tree-select :data="state.deptData"
                                            :height="208"
                                            class="w100"
                                            v-model="state.ruleForm.deptIds"
                                            clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户邮箱" prop="email">
                            <el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户密码" prop="password">
                            <el-input v-model="state.ruleForm.password" placeholder="请输入" type="password"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户状态" prop="lockFlag">
                            <el-select v-model="state.ruleForm.lockFlag">
                                <el-option label="启用" value="1"/>
                                <el-option label="禁用" value="0"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="systemUserDialog">
import {reactive, ref} from 'vue';
import UserApi from "/@/api/system/UserApi";
import RoleApi from "/@/api/system/RoleApi";
import DeptApi from "/@/api/system/DeptApi";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const userFormRef = ref();
const state = reactive({
    ruleForm: {
        userId: '',
        username: '', // 账户名称
        password: '', // 账户密码
        nickname: '', // 用户昵称
        realName: '',//真实姓名
        roleIds: '', // 关联角色
        deptIds: '', // 部门
        phone: '', // 手机号
        email: '', // 邮箱
        lockFlag: '1', // 用户状态
    } as RowUserType,
    deptData: [] as DeptTreeType[], // 部门数据
    roleData: [] as RoleSelect[],
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});
const rules = ref({
    username: [{required: true, message: '账户名称不能为空', trigger: "blur"}],
    nickname: [{required: true, message: '用户昵称不能为空', trigger: "blur"}],
    relaName: [{required: true, message: '用户姓名不能为空', trigger: "blur"}],
    roleIds: [{required: true, message: '角色名称不能为空', trigger: "blur"}],
    deptIds: [{required: true, message: '用户部门不能为空', trigger: "blur"}],
})
// 打开弹窗
const openDialog = (type: string, id?: string) => {
    state.dialog.isShowDialog = true;
    state.dialog.type = type
    if (userFormRef.value) {
        userFormRef.value.resetFields();
    }
    if (type === 'edit') {
        if (id){
            UserApi.view(id).then(res => {
                state.ruleForm = res.data
            })
        }
        state.dialog.title = '修改用户';
        state.dialog.submitTxt = '修 改';
    } else {
        state.dialog.title = '新增用户';
        state.dialog.submitTxt = '新 增';
    }
    getDeptTree();
    getRoleSelect();
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
    userFormRef.value.resetFields();
};
// 取消
const onCancel = () => {
    closeDialog();
};
// 提交
const onSubmit = () => {
    userFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false;
        }
        if (state.dialog.type === 'edit') {
            UserApi.update(state.ruleForm)
        } else {
            UserApi.insert(state.ruleForm)
        }
        closeDialog();
        emit('refresh');
    })
}
// 初始化部门数据
const getDeptTree = () => {
    DeptApi.getDeptTree().then(res => {
        state.deptData = res.data
    })
}

//初始化角色数据
const getRoleSelect = () => {
    RoleApi.getRoleDropList().then(res => {
        state.roleData = res.data
    })
}
// 暴露变量
defineExpose({
    openDialog,
});
</script>
